<!DOCTYPE html>
<#assign base=springMacroRequestContext.getContextUrl("")>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />


    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/sensorChart/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/sensorChart/css/bootstrap-table.css">
    <script type="text/javascript" src="${base}/glrStatic/sensorChart/js/jquery.1.9.1.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/sensorChart/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/sensorChart/js/bootstrap-table.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/sensorChart/js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/sensorChart/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/sensorChart/js/layer.js"></script>
    <link rel="stylesheet" href="${base}/glrStatic/sensorChart/css/layer.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/sensorChart/css/style.scss">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/sensorChart/css/style.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/sensorChart/css/sensor_main.css">


    <script type="text/javascript" src="${base}/glrStatic/viewOutline/ajax.js"></script>




    <title>传感器</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="sensor_data">
    <meta http-equiv="description" content="sensor_CH">

    <style>
        #type, #name {
            background: rgba(255,255,255,0);
            outline-style: none;
            border-style: none;
            border-radius: 0;
            border-bottom: 2px solid #0dd4ff;
            color: #0dd4ff;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }
        .sensor_type,.sensor_name,.sensor_current_data,{
            color:#fff
        }
        body{
            background: #222d32;

        }
        input::-webkit-input-placeholder{
            color: #0dd4ff;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color: #0dd4ff;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color: #0dd4ff;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color: #0dd4ff;
        }
        .sensor_type,.sensor_name,#type,#name,.sensor_current_data{
            color: #fff;
        }
        #type,#name{
            background:rgba(255,255,255,0);
            outline-style: none;
            border-style: none;
            border-radius: 0;
            border-bottom: 2px solid #0dd4ff;
            color: #0dd4ff;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;

        }
        select::-ms-expand { display: none; }
        /****************TABLE STYLE******************/
        .form-control{
            outline-style: none;
            background: rgba(255,255,255,0);
            color: #fff;
            border: 1px solid #0dd4ff;
        }
        .sensorTable{
            padding: 0 5px;
        }
        #sensorData{
            border-style: none;
            /* border: 1px solid #0dd4ff; */
            background: rgba(255,255,255,0);
        }
        #sensorData tr td{
            font-size:14px;
            color:#0dd4ff;
            border-style:none;
            border: 1px solid #0dd4ff;
        }
        #sensorData tr th{
            border-style:none;
            border: 1px solid #0dd4ff;
        }
        #sensorData tr th .th-inner{
            font-size:14px;
            color:#0dd4ff;
        }

        .fixed-table-container{
            border-style:none;
        }
        .fixed-table-pagination div.pagination, .fixed-table-pagination .pagination-detail{
            padding-right:20px;
        }
        .pagination>li>a, .pagination>li>span{
            background-color: rgba(255,255,255,0);
            border: 0px solid #fff;
            color: #0dd4ff;
        }
        .glyphicon{
            color: #0dd4ff;
        }
        .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){
            background: rgba(255,255,255,0);
            border-color: #0dd4ff;
        }
        .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
            background-color: #0dd4ff;
            border-color: #0dd4ff;
            border-radius: 15px;
        }
        .table-hover>tbody>tr:hover {
            background-color: rgba(14,121,255,.4);
        }
        .fixed-table-pagination .pagination-info{
            color: #0dd4ff;
        }
        .fixed-table-pagination .page-list{
            color: #0dd4ff;
        }
        .btn-group>.btn:first-child {
            background: rgba(255,255,255,0);
            color: #0dd4ff;
            border-color: #0dd4ff;
        }
        .fixed-table-pagination .dropup .dropdown-menu {
            background: #0dd4ff;
        }
        .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
            background-color: rgba(255,255,255,.4);
        }
        .dropdown-menu>li>a {
            color: #fff;
        }
        .fixed-table-container tbody .selected td {
            background-color: rgba(255,255,255,0);
        }
        .fixed-table-loading {
            background-color: rgba(255,255,255,0);
            color:rgba(255,255,255,0);
        }
        .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
            color: #0dd4ff;
            background-color: #eee;
            border-color: #ddd;
            border-radius: 15px;
        }
        /*
        .accordion-li{
            width:98.1px;
            transition:width 0.5s ease 0s;
        }
        */
        .accordion-li:hover{
            width:200px;
        }

        .spanStyle{
            white-space: nowrap;  /*强制span不换行*/
            display: inline-block;  /*将span当做块级元素对待*/
            width: 122px;  /*限制宽度*/
            overflow: hidden;  /*超出宽度部分隐藏*/
            text-overflow: ellipsis;  /*超出部分以点号代替*/
            line-height: 0.9;  /*数字与之前的文字对齐*/
        }
        .sensor_current_data {
            position: absolute;
            left: 553px;
            top: 20px;
            font-size: 16px;
            float: left;
        }

    </style>
</head>
<body>

    <div id="condition" style="height:60px;width:1200px;padding-top: 12px;margin: 0 auto;padding-top: 100px">

        <span class="sensor_type">传感器类型:</span>
        <div class="type_sensor">
            <select name="type" id="type">
                <option value="">请选择</option>
                <option value="101">十一合一传感器</option>
                <option value="102">五合一传感器</option>
                <option value="103">其它传感器</option>
            </select>
        </div>

        <span class="sensor_name">传感器名称:</span>
        <div class="choice_sensor">
            <select name="code" id="code">
            </select>
        </div>

        <span class="sensor_current_data"></span>

    </div>


    <!--图表-->
    <div class="sensor" id="sensor" style="width: 80%" >
        <div class="line"></div>
        <div class="accrodion-group">
            <div class="accordion-DIV">
                <div class="1-accordion" style="padding-left: 0%; padding-right: 0%;">
                    <ul class="accordion horizontal" >

                        <li class="accordion-li type11">
                            <i class="accordion-icon fa" style="color: rgb(51, 51, 51);" >
                                <span style="font-size:20px;color:#777;margin-left:-15px;">湿度</span>
                                <img src="${base}/glrStatic/sensorChart/images/humidity.png" ><br>
                                <span style="font-size:20px;color:#777;margin-left:-15px;"><span class="humidity">-</span>RH</span>
                            </i>
                            <a href="javascript:void(0)"  >
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/01.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center; " >
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">湿度</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="humidity">-</span>RH</p>
                            </div>
                        </li>

                        <li class="accordion-li  type12" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span style="font-size:20px;color:#777;margin-left:-15px;">雨量</span>
                                <img src="${base}/glrStatic/sensorChart/images/rainfall.png"><br>
                                <span style="font-size:20px;color:#777;margin-left:-15px;"><span class="rainfall">-</span>mm</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/02.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">雨量</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="rainfall">-</span>mm</p>
                            </div>
                        </li>

                        <li class="accordion-li  type13" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span style="font-size:20px;color:#777;margin-left:-15px;">气压</span>
                                <img src="${base}/glrStatic/sensorChart/images/pressure.png"><br>
                                <span style="font-size:20px;color:#777;margin-left:-15px;"><span class="airpressure">-</span>hPa</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/03.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">气压</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="airpressure">-</span>hPa</p>
                            </div>
                        </li>

                        <li class="accordion-li  type14" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span style="font-size:20px;color:#777;margin-left:-15px;">温度</span>
                                <img src="${base}/glrStatic/sensorChart/images/temperature.png"><br>
                                <span style="font-size:20px;color:#777;margin-left:-15px;"><span class="temperature">-</span>℃</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/04.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">温度</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="temperature">-</span>℃</p>
                            </div>
                        </li>

                        <li class="accordion-li  type15" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span class="spanStyle">风速</span>
                                <img src="${base}/glrStatic/sensorChart/images/wind.png"><br>
                                <span ><span class="windSpeed">-</span>m/s</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/05.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">风速</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="windSpeed">-</span>m/s</p>
                            </div>
                        </li>

                        <li class="accordion-li  type16" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span class="spanStyle">风向</span>
                                <img src="${base}/glrStatic/sensorChart/images/windDirection.png"><br>
                                <span class="spanStyle"><span class="windDirection">-</span></span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/06.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">风向</h4>
                                <p class="accordion-content" class="spanStyle" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="windDirection">-</span></p>
                            </div>
                        </li>

                        <li class="accordion-li  type17" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span class="spanStyle">噪声</span>
                                <img src="${base}/glrStatic/sensorChart/images/noise.png"><br>
                                <span><span class="noise">-</span>dB</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/03.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">噪声</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="noise">-</span>dB</p>
                            </div>
                        </li>

                        <li class="accordion-li  type18">
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span >PM2.5</span><img src="${base}/glrStatic/sensorChart/images/PM25.png"><br><span ><span class="pm25">-</span>ug/m3</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/04.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">PM2.5</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="pm25">-</span>ug/m3</p>
                            </div>
                        </li>

                        <li class="accordion-li  type19">
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span >PM10</span>
                                <img src="${base}/glrStatic/sensorChart/images/PM10.png"><br>
                                <span ><span class="pm10">-</span>ug/m3</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/05.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>

                            <div class="accordion-description" style="text-align: center; ">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">PM10</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="pm10">-</span>ug/m3</p>
                            </div>
                        </li>

                        <li class="accordion-li  type20">
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span class="spanStyle">光辐射强度</span>
                                <img src="${base}/glrStatic/sensorChart/images/radiation.png"><br>
                                <span style="font-size: 16px" ><span class="opticalRadiation">-</span>W/㎡</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/06.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center;">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">光辐射强度</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="opticalRadiation">-</span>W/㎡</p>
                            </div>
                        </li>

                        <li class="accordion-li  type21" >
                            <i class="accordion-icon fa " style="color: rgb(51, 51, 51);">
                                <span class="spanStyle">紫外线强度</span>
                                <img src="${base}/glrStatic/sensorChart/images/ultraviolet.png"><br>
                                <span ><span class="ultravioletRay">-</span>级</span>
                            </i>
                            <a href="javascript:void(0)">
                                <div class="accordion-img" style="background:url(${base}/glrStatic/sensorChart/images/06.png) no-repeat ;width:100%;height:100%" alt="null"></div>
                            </a>
                            <div class="accordion-description" style="text-align: center; ">
                                <h4 class="accordion-title" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;">紫外线强度</h4>
                                <p class="accordion-content" style="text-shadow: rgb(255, 255, 255) 0px 0px 1px;"><span class="ultravioletRay">-</span>级</p>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                $(".accordion-li").mouseover(function(){
                    $(this).addClass('active');
                });
                $(".accordion-li").mouseout(function(){
                    $(this).removeClass('active');
                });

            })
        </script>


    </div>


    <!--表格-->
    <div class="sensorTab" style="display:none;">
        <table id="sensorData" class="table table-hover"></table>
    </div>
    </div>

    <script type="text/javascript">
        var XAccessToken='${AccessToken}';

        var table;
        $(function(){
            $("#chart").hide();
            $(".sensorTab").hide();
            //点击表格展示
            $(".tabChange #sheet").click(function(){
                $("#sheet").hide();
                $("#chart").show();

                $(".sensorTab").show();
                $(".sensor").hide();

                $(".choice_sensor").hide();
                $(".type_sensor").hide();
                $(".sensor_type").hide();
                $(".sensor_name").hide();
            });
            //点击图标展示
            $(".tabChange #chart").click(function(){
                $("#chart").hide();
                $("#sheet").show();

                $(".sensorTab").hide();
                $(".sensor").show();

                $(".choice_sensor").show();
                $(".type_sensor").show();
                $(".sensor_type").show();
                $(".sensor_name").show();
            });
            var bb = document.body.clientHeight - 147;
        });


        $("#type").change(function(){
            var type=$("#type").val();
            getSensorList(type);
        });
        $("#code").change(function(){
            var code=$("#code").val();
            getSensorData(code);
        });
        $(function () {
            getSensorList("");
        })
        function getSensorList(type){
            $.ajax({
                url:'getSensorList?X-Access-Token='+XAccessToken,
                data:{type:type},
                async:false,
                success:function(data){
                    $("#code").empty();
                    for(var i=0;i<data.obj.length;i++){
                        var options="<option value='"+data.obj[i].code+"'>"+data.obj[i].name+"</option>";
                        $("#code").append(options);
                    }
                    var code=$("#code").val();
                    getSensorData(code);
                }
            });
        }

        function getSensorData(code){
            $("#sensor").css('width','100%').css('transition','width 0.5s');
            $.ajax({
                url:'getSensorChartData?X-Access-Token='+XAccessToken,
                data:{code:code},
                async:false,
                success:function(data){
                    //$(".type11").show();
                    $(".type12").show();
                    $(".type13").show();
                    //$(".type14").show();
                    $(".type15").show();
                    $(".type16").show();
                    //$(".type17").show();
                    //$(".type18").show();
                    //$(".type19").show();
                    $(".type20").show();
                    $(".type21").show();

                    if (data.obj.type=="101"){
                        $('.accordion-li').css('width', '9.08%')
                    }

                    if (data.obj.type=="102"){
                        $(".type12").hide();
                        $(".type13").hide();
                        $(".type15").hide();
                        $(".type16").hide();
                        $(".type20").hide();
                        $(".type21").hide();
                        $('.accordion-li').css('width', '19.6%')
                    }

                    //当前数据时间:
                    //sensor_current_data
                    debugger;
                    $(".sensor_current_data").html("");
                    if (data.obj.createDate){
                        $(".sensor_current_data").html("当前数据时间:"+data.obj.createDate);
                    }



                    $(".rainfall").html(data.obj.rainfall);
                    $(".humidity").html(data.obj.humidity);
                    $(".airpressure").html(data.obj.airpressure);
                    $(".temperature").html(data.obj.temperature);
                    $(".windSpeed").html(data.obj.windSpeed);
                    $(".windDirection").html(data.obj.windDirection);
                    $(".noise").html(data.obj.noise);
                    $(".pm25").html(data.obj.pm25);
                    $(".pm10").html(data.obj.pm10);
                    $(".opticalRadiation").html(data.obj.opticalRadiation);
                    $(".ultravioletRay").html(data.obj.ultravioletRay);
                }
            });
        }
    </script>

</body>
</html>
